<template>
  <!-- 包含整个食物项的外层div，使用Bootstrap的列布局类 -->
  <div class="col-md-4">
    <!-- 卡片组件，带有阴影和边距 -->
    <div class="card mb-4 shadow-sm">
      <!-- 显示食物图片的img标签，绑定src属性到food.image -->
      <img :src="food.image" class="card-img-top" alt="food image" />
      <!-- 卡片内容部分 -->
      <div class="card-body">
        <!-- 显示食物名称 -->
        <h5 class="card-title">{{ food.name }}</h5>
        <!-- 显示食物描述 -->
        <p class="card-text">{{ food.description }}</p>
        <!-- Vue Router链接，点击跳转到食物详情页面 -->
        <router-link
          :to="{ name: 'FoodDetail', params: { id: food.id } }"
          class="btn btn-primary"
        >查看详情</router-link>
        <!-- 删除按钮，点击触发deleteFood方法 -->
        <button @click="deleteFood" class="btn btn-danger ml-2">删除</button>
        <!-- 点赞按钮组件，传递food的id作为prop -->
        <like-button :food-id="food.id" />
      </div>
    </div>
  </div>
</template>

<script>
import LikeButton from '@/components/LikeButton.vue'; // 导入点赞按钮组件

export default {
  name: 'FoodItem', // 组件名称
  components: {
    LikeButton, // 注册点赞按钮组件
  },
  props: {
    food: Object, // 接收一个对象类型的food属性
  },
  methods: {
    // 删除食物的方法，触发父组件的delete-food事件，并传递food的id
    deleteFood() {
      this.$emit('delete-food', this.food.id);
    },
  },
};
</script>

<style scoped>
/* 为食物图片定义样式，使其宽度和高度固定，并覆盖整个区域 */
.card-img-top {
  width: 373px;
  height: 307px;
  object-fit: cover;
}
</style>
